<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="warning" icon="el-icon-refresh" size="mini" @click="handleUpdate"
                    v-hasPermi="['app:versionUpdate:edit']">更新APP版本</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="tableData" border>
            <!-- <el-table-column label="序号" align="center" type="index" /> -->
            <el-table-column label="版本号" align="center" prop="versionNumber" />
            <el-table-column label="描述" align="center" prop="remark" />
            <el-table-column label="是否必须升级" align="center" prop="whether">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.whether === 'YES' ? 'success' : 'warning'">{{scope.row.whether === 'YES' ?
                        '是' :
                        '否'}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="下载地址" align="center" prop="downloadLink" />
        </el-table>

        <!--  -->
        <el-dialog :title="title" :visible.sync="open" width="35%" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="auto" class="dialogForm">
                <el-form-item label="APP文件">
                    <el-upload class="upload-demo" ref="upload" accept=".apk" :auto-upload="false" action="#" :limit="1"
                        :multiple="false">
                        <el-button size="small" type="primary">选择apk文件</el-button>
                        <div class="el-upload__tip" slot="tip">注：只能上传.apk格式文件</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="版本号" prop="versionNumber">
                    <el-input v-model="form.versionNumber" placeholder="请输入" clearable />
                </el-form-item>
                <el-form-item label="是否必须升级" prop="whether">
                    <el-radio-group v-model="form.whether">
                        <el-radio label="YES">是</el-radio>
                        <el-radio label="NO">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="版本描述" prop="remark">
                    <el-input v-model="form.remark" :autosize="size" type="textarea" placeholder="请输入" clearable />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm" v-loading.fullscreen.lock="fullscreenLoading">确
                    定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listVersion,updateVersion,uploadFile } from "@/api/system/app";
export default {
    name: "Mechanical",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            tableData: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 表单参数
            form: {
                downloadLink:null,
                versionNumber:null,
                whether:null,
                remark:null,
            },
            size:{
                minRows: 3,
                maxRows: 10
            },
            // 表单校验
            rules: {
                versionNumber: [
                    { required: true, message: "请填写版本号", trigger: "change" }
                ],
                whether: [
                    { required: true, message: "请选择是否必须升级", trigger: "change" }
                ],
                remark: [
                    { required: true, message: "请填写版本描述", trigger: "change" }
                ],
            },
            //遮罩层
            fullscreenLoading: false
        };
    },
    created() {
        this.getList();

    },
    methods: {
        /** 查询版本 */
        getList() {
            this.loading = true;
            listVersion().then(response => {
                this.tableData = response.data;
                this.loading = false;
            });
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.resetForm("form");
            this.$refs.upload.clearFiles()
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.form = { ...this.tableData[0] }
            this.open = true
        },
        /** 提交文件上传按钮 */

        /** 提交按钮 */
        submitForm() {
            if (this.$refs.upload.uploadFiles.length <= 0) return this.$modal.msgWarning('请选择需更新apk文件')
            this.$refs["form"].validate(async valid => {
                if (valid) {
                        this.fullscreenLoading = true
                        const formData = new FormData();
                        this.$refs.upload.uploadFiles.forEach(file => {
                            formData.append('file', file.raw);
                        });
                        try {
                            const result = await uploadFile(formData)
                            if (result.code === 200) {
                                this.form.downloadLink = result.data[0].url
                                updateVersion(this.form).then(res=>{
                                    this.$refs.upload.clearFiles()
                                    this.$modal.msgSuccess('操作成功')
                                    this.getList()
                                    this.open = false;
                                    this.fullscreenLoading = false
                                })


                            } else {
                                this.$modal.msgError('文件上传失败')
                                this.fullscreenLoading = false
                            }
                        } catch (error) {
                            console.log(error)
                            this.fullscreenLoading = false
                        }
                }
            });
        }
    }
};
</script>



<style lang="scss" scoped>
.dialogForm {
    .el-form-item {
        width: 90%;

    }
}
</style>
